<template>
  <div class="page-wrapper" style="background: #fff;">
    <view
      v-if="noticelist.length == 0"
      style="width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: cneter;"
    >
      <img
        style="width: 200px; height: 200px; margin: -20px auto 20px;"
        src="/announcement/img/meiyou_jilu.png"
      >
      <view style="color: #999; text-align: center;">当前暂无公告</view>
    </view>
    <view
      v-for="(item, index) in noticelist"
      v-else
      :key="index"
      class="notice-wrapper"
      :style="
        item.isTop === true
          ? 'background:rgba(250,251,251,1)'
          : 'background: #fff'
      "
      @click="signContract(item)"
    >
      <view class="notice-wrap">
        <view class="wrap-top flex">
          <div class="flex-start">
            <span class="name">{{ item.title }} </span>
            <span v-if="item.isTop === true" class="settop">置顶</span>
          </div>
          <span class="notice-time">{{
            item.publishDate | fullTime(item.publishDate)
          }}</span>
        </view>
        <view class="wrap-btm">
          <p>{{ item.content }}</p>
        </view>
      </view>
    </view>
  </div>
</template>
<script>
import { fullTime } from "@/utils/tools.js";
import { listSysNoticeByUser, readUserNotice } from "@/services/contract";
import { mapState } from "vuex";
export default {
  filters: {
    fullTime: fullTime
  },
  data() {
    return {
      noticelist: []
    };
  },
  computed: {
    ...mapState(["site"])
  },
  mounted() {
    this.getnoticelist(this.site.companyId);
  },
  methods: {
    getnoticelist(companyId) {
      listSysNoticeByUser(companyId).then(res => {
        this.noticelist = res;
      });
    },
    signContract(item) {
      readUserNotice(item.id, this.$store.state.site.employeeId)
        .then(res => {
          this.getnoticelist(this.site.companyId);
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
      uni.navigateTo({
        url: "/announcement/detail?id=" + item.id
      });
    }
  }
};
</script>
<style lang="scss">
.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.setbg {
  background: rgba(250, 251, 251, 1);
}
</style>
